import ConsumerQuery from "../components/consumer/ConsumerQuery";
import {message} from "antd";
import {useState} from "react";
import ConsumerList from "../components/consumer/ConsumerList";

/**
 * 消费者管理页面
 */
const Consumer = () => {

    const [messageApi, contextHolder] = message.useMessage();
    // 查询的主题名
    const [topicName, setTopicName] = useState("");
    // 查询到的消费者信息
    const [consumers, setConsumers] = useState([]);

    return (
        <div>
            {contextHolder}

            {/* 查询条件部分 */}
            <ConsumerQuery
                messageApi={messageApi}
                topicName={topicName}
                setTopicName={setTopicName}
                setConsumers={setConsumers}
            />

            {/* 页面展示部分 */}
            <ConsumerList
                consumers={consumers}
            />

        </div>
    )
}
export default Consumer;